<template>
  <div id="add_freight">
    <c-title :hide="false" :text="CTitle"></c-title>
    <div class="goods-release">
      <div class="section">
        <van-field v-model="dispatch_name" label="模板名称:" placeholder="请输入模板名称" />
        <!-- <van-field @blur="dispatchnameinp" border="{{false}}" label="模板名称:" placeholder="请输入模板名称" value="{{dispatch_name}}"></van-field> -->
      </div>

      <div class="section commodity">
        <van-field v-model="fieldValue" is-link readonly label="计费方式：" :placeholder="regional" @click="openPicker" ></van-field>
        <van-popup v-model:show="showPicker" round position="bottom">
          <van-picker :show-toolbar="true" :columns="objectMultiArray" @change="commodityBtn" @cancel="onCancel" @confirm="onConfirm" />
        </van-popup>
      </div>
      <div class="section edit-c" v-if="regional == '按重'">
        <van-field v-model="first_weight" label="首重克数:" placeholder="请输入首重克数" />
        <van-field v-model="another_weight" label="续重克数:" placeholder="请输入续重克数" />
        <van-field v-model="first_weight_price" label="首重价格:" placeholder="请输入首重价格" />
        <van-field v-model="another_weight_price" label="续重价格:" placeholder="请输入续重价格" />
      </div>
      <div class="section edit-c" v-if="regional == '按件'">
        <van-field v-model="first_piece" label="首件个数:" placeholder="请输入首件个数" />
        <van-field v-model="another_piece" label="续件个数:" placeholder="请输入续件个数" />
        <van-field v-model="first_piece_price" label="首件价格:" placeholder="请输入首件价格" />
        <van-field v-model="another_piece_price" label="续件价格:" placeholder="请输入续件价格" />
      </div>
      <div class="section btn" v-if="!showCoverLayer">
        <div @click="publishEvent" class="button">提交</div>
      </div>
      <div class="section btn" v-else>
        <div class="button">提交</div>
      </div>
    </div>
  </div>
</template>

<script>
import add_freight_template_controller from "./addFreightTemplate_controller";

export default add_freight_template_controller;
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
page {
  background: #fff;
}

.goods-release .btn {
  background-color: #fff;
  border-top: 1px solid #ebebeb;
  bottom: 0;
  box-sizing: border-box;
  margin-top: 20px;
  padding: 0 24px;
  position: fixed;
  width: 100%;
  z-index: 100;
}

.goods-release .btn .button {
  background-color: #f15353;
  border-radius: 3px;
  color: #fff;
  font-size: 16px;
  height: 40px;
  line-height: 40px;
  margin: 6px 0;
  text-align: center;
  width: 100%;
}
.goods-release .commodity {
  align-items: center;
  display: flex;
  font-size: 14px;
//   margin: 10px 0;
//   padding-left: 15px;
}

.goods-release .commodity .button {
  border: 1px solid #bfcbd9;
  border-radius: 5px;
  color: #1f2d3d;
  margin-left: 30px;
  max-width: 240px;
  min-width: 80px;
  overflow: hidden;
  padding-left: 5px;
  padding-right: 5px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
